/**
 * @Author: LTT 17386012013@163.com
 * @Date: 2024-08-14 13:50:45
 * @Description:
 * @LastEditTime: 2024-08-22 16:49:18
 * @LastEditors: LTT 17386012013@163.com
 */

import { h, VNode } from 'snabbdom';
import { DavinciMedia } from './custom-types';
import { SlateElement, IDomEditor, DomEditor, SlateTransforms } from '@wangeditor/editor';

function renderVideo(elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode {
	const { src = '', poster = '', width = '500', height = 'auto', fileName = '', style = { verticalAlign: 'middle' } } = elem as DavinciMedia;

	console.log('fileName', fileName);

	const ext = fileName.split('.').pop()!;
	const config = editor.getConfig();
	const { color = '#000', selectedColor = '#000', backgroundColor = 'rgba(0,0,0,0.1)' } = config.EXTEND_CONF?.['davinci-media'] ?? {};
	// const isVideo = ['mp4', 'avi', 'rmvb'].includes(suffix);
	const isAudio = ['mp3', 'flac', 'wav', 'ogg', 'aac', 'mpeg'].includes(ext.toLowerCase());
	// 是否选中
	const selected = DomEditor.isNodeSelected(editor, elem);

	const viewMode = config.viewMode;
	// 其他，mp4 格式

	const davinciBlockVnode = h(
		'span',
		{
			props: { contentEditable: false, draggable: true },
			style: {
				display: 'inline-block',
				padding: '0 3px',
				margin: '0 1px',
				color: selected ? selectedColor : color,
				background: backgroundColor ?? 'rgba(0,0,0,0.1)',
				animation: selected ? 'davinci-block-blink 1s linear 0s infinite' : 'none',
				fontWeight: 'bold',
				userSelect: 'none',
				cursor: 'pointer'
			},
			on: {
				async contextmenu(e) {
					e.preventDefault();
					let res = await config.EXTEND_CONF?.['davinci-media']?.onRightClick?.(elem);
					if (res) {
						SlateTransforms.removeNodes(editor, {
							match: n => DomEditor.checkNodeType(n, 'davinci-media')
						});
					}
				},
				click() {
					const { children, ...rest } = elem;
					config.EXTEND_CONF?.['davinci-media']?.onClick?.(rest);
				}
			}
		},
		`{媒体：${fileName}}`
	);
	const videoVnode = h(
		'video',
		{
			src: src,
			props: { controls: true },
			style: {
				width: width + 'px'
			}
		},
		''
	);

	const audioVnode = h(
		'audio',
		{
			src: src,
			props: { controls: true },
			style: {
				width: width + 'px'
			}
		},
		''
		// 该写法有bug
		// [h(
		// 	'source',
		// 	{
		// 		src: src,
		// 		type: `audio/${suffix}`,
		// 	},
		// 	''
		// )]
	);

	const vnode = h(
		'div',
		{
			attrs: {
				// 'data-selected': selected ? 'true' : 'false'
			},
			style: {
				outline: 'none',
				display: 'flex',
				justifyContent: 'center',
				alignItems: 'center',
				padding: '2px'
			}
		},
		[isAudio ? audioVnode : videoVnode]
	);
	// 【注意】void node 中，renderElem 不用处理 children 。core 会统一处理。

	const containerVnode = h(
		'div',
		{
			props: {
				contentEditable: true
			},
			style: {
				display: 'inline-block',
				justifyContent: 'center',
				alignItems: 'center',
				padding: '0 3px',
				margin: '0 1px',
				fontWeight: 'bold',
				border: '1px dashed #ccc',
				animation: selected ? 'davinci-block-blink 1s linear 0s infinite' : 'none',
				...style
			},
			on: {
				mousedown: e => e.preventDefault()
			}
		},
		vnode
	);

	return viewMode == 1 ? davinciBlockVnode : containerVnode;
}

const renderVideoConf = {
	type: 'davinci-media', // 和 elemNode.type 一致
	renderElem: renderVideo
};

export { renderVideoConf };

